﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="keywords" content="jQuery DropDownList, List, ListBox, Popup List, jqxDropDownList, jqxListBox, List Widget, ListBox Widget, DropDownList Widget" /> 
    <meta name="description" content="This demo shows how to retrieve some XML data, parse it using jQuery's methods, then provide it to the jqxListBox as the datasource."/>
    <title id='Description'>This demo shows how to retrieve some XML data, parse it using jQuery's methods, then provide it to the jqxListBox as the datasource.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
	<script type="text/javascript" src="../../scripts/demos.js"></script>
	<script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
</head>
<body>
    <div id='content'>
        <script type="text/javascript">
            $(document).ready(function () {
                var url = 'jqxlistboxxmldata.xml';
                var loader = $("<img src='../../images/ajax-loader.gif' />");

                var parentsLength = $("#jqxWidget").parents().length;
                if (parentsLength > 3) {
                    url = 'demos/jqxlistbox/jqxlistboxxmldata.xml';
                    loader = $("<img src='images/ajax-loader.gif' />");
                }

                setTimeout(function () {
                    $.ajax({
                        url: url,
                        type: 'GET',
                        success: function (data) {
                            var countries = $(data).find('countries').text();
                            var array = countries.split('\n');
                            var source = new Array();
                            var index = 0;
                            $.each(array, function () {
                                if (this.length > 0) {
                                    source[index++] = this;
                                }
                            });
                            $("#jqxWidget").jqxListBox({ source: source });
                            $("#loading").css('display', 'none');

                        }
                    });
                }, 500);

                // Create a jqxListBox
                $("#jqxWidget").jqxListBox({ width: 270, height: 320});
                var offset = $("#jqxWidget").position();
                $("#loading").css({ left: 75 + offset.left, top: -220 });
                $("#loading").append(loader);
            });
        </script>
        <div id='jqxWidget'>
        </div>
         <div id='loading' style='position: relative; left: 0; top: 0;'></div>
    </div>
</body>
</html>
